<!--
 * @Descripttion: 报告管理-查看报告
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-04-18
 * @LastEditors: 颜博骏 bojun@ssc-hn.com
 * @LastEditTime: 2024-04-26
-->
<template>
  <div class="ssc-list org-position-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="商品">
            <a-select v-model:value="searchParam.goodId" placeholder="请选择商品" allowClear>
              <a-select-option v-for="item in goodsData" :key="item.goodId" :value="item.goodId">{{ item.goodsName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="批次名称"> <a-input v-model:value="searchParam.batchName" placeholder="请输入批次名称" allowClear /> </a-form-item
        ></a-col>

        <a-col :span="6">
          <a-form-item label="批次编号"> <a-input v-model:value="searchParam.batchNumber" placeholder="请输入批次编号" allowClear /> </a-form-item
        ></a-col>

        <a-col :span="6">
          <a-form-item label="码值"> <a-input v-model:value="searchParam.codeValue" placeholder="请输入码值" allowClear /> </a-form-item
        ></a-col>
        <a-col :span="24" style="margin-bottom: 12px">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">查看报告</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a @click="check(record)">查看</a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { HttpCodeEnum } from '/@/enums/httpEnum'

  import { requestCheckReport } from '/@/api/business/tracecode/channelCodeInfo'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'
  import { requestGetBatchGoodsList } from '/@/api/business/tracecode/batch'

  const router = useRouter()

  /** 搜索条件 */
  const searchParam = reactive({
    /**批次名称 */
    batchName: '',
    /**批次编号 */
    batchNumber: '',
    /**码值 */
    codeValue: '',
    /**商品id */
    goodId: null,
  })
  const goodsData = ref<GetAllGoodsTypes.IResponse[]>([])

  /** 表格列配置 */
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      customRender: (row) => `${row.index + 1}`,
    },
    { title: '码值', dataIndex: 'codeValue' },
    { title: '批次名称', dataIndex: 'batchName', key: 'batchName' },
    { title: '批次编号', dataIndex: 'batchNumber', key: 'batchNumber' },
    { title: '商品', dataIndex: 'goodsName', key: 'goodsName' },
    { title: '更新时间', dataIndex: 'createdTime', key: 'createdTime' },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<GetReportInfoTypes.IRequest, GetReportInfoTypes.IResponse[]>(searchParam, requestCheckReport)

  onMounted(() => {
    queryList()
    initGoodsList()
  })

  /**
   * 重置
   */
  const clear = () => {
    searchParam.batchName = ''
    searchParam.batchNumber = ''
    searchParam.codeValue = ''
    searchParam.goodId = null
    search()
  }

  /**
   * 初始化商品列表
   */
  const initGoodsList = async () => {
    const { responseCode, responseData } = await requestGetBatchGoodsList({})
    if (responseCode === HttpCodeEnum.SUCCESS) {
      goodsData.value = responseData
    }
  }

  /**
   * 搜索
   */
  const search = async () => queryList({ current: 1 })

  /**
   * 查看
   * @param record 商品
   */
  const check = (record: GetReportInfoTypes.IResponse) => {
    const { codeValue } = record
    router.push({
      path: '/report/detailReport',
      query: { codeValue },
    })
  }
</script>

<style lang="less" scoped></style>
